<template>
    <div>
        <el-dialog
            :visible.sync="dialogVisible"
            :width="width"
            title="退订"
            :modal-append-to-body="false"
            :close-on-click-modal="false"
            v-dialogDrag
            class="dialog-main"
            :modal='false'
            >
            <div>
                <el-form :model="ruleForm" :rules="rules" ref="formName" label-width="120px" class="demo-ruleForm" size="mini" slot="center">
                    <el-form-item label="单聊退订人员:" prop="subscribes0"> 
                        <el-tag
                            v-for="tag in ruleForm.subscribes0"
                            :key="tag.employeeName + tag.employeeId"
                            closable
                            size="mini"
                            style="margin-right:5px"
                            >
                            {{tag.employeeName}}  
                        </el-tag>
                        <el-button class="button-new-tag" size="mini" @click="openSelectDialog(ruleForm.subscribes0,4)">+</el-button>
                    </el-form-item>
                    <el-form-item label="群聊退订人员:" prop="subscribes1"> 
                       <el-tag
                            v-for="tag in ruleForm.subscribes1"
                            :key="tag.employeeName + tag.employeeId"
                            closable
                            size="mini"
                            style="margin-right:5px"
                            >
                            {{tag.employeeName}} 
                        </el-tag>
                         <el-button class="button-new-tag" size="mini" @click="openSelectDialog(ruleForm.subscribes1,5)">+</el-button>
                    </el-form-item>
                 
                </el-form>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="successDing('formName')" size="mini" type="primary">确 定</el-button>
                <el-button @click="closeCommonDialog()" size="mini">取 消</el-button>
            </span>
        </el-dialog>
        <multipleSelePdialog ref="multipleSelePdialog" @getSelectMulList="getSelectMulList"></multipleSelePdialog>
    </div>
</template>
<script>
import { saveOriginSubscribe,getOriginSubscribe } from '@/api/user.js'
import multipleSelePdialog from '@/components/messageSourceConfig/multipleSelePdialog'
export default {
    components:{
        multipleSelePdialog,
    },
    data(){
        return {
            dialogVisible: false,
            ruleForm:{},
            rules:{
            //subscribes1: [
            //    { required: true, message: this.M2('请填写单聊退订人员！'), trigger: 'blur' },
            //],
            //subscribes0: [
            //    { required: true, message: this.M2('请填群聊退订人员！'), trigger: 'blur' },
            //],
            },
        }
    },
    props:{
        titleText:{
            type:String,
            default:() => ('')
        },
        width:{
            type:String,
            default:() => ('500px')
        },
    },
    methods:{
        getSelectMulList(tagsList,val){
            tagsList.forEach(item => {
                item.employeeId = item.id
                item.employeeName = item.name
            })
            if(val == 4){
                this.ruleForm.subscribes0 = tagsList
            }else if(val ==5){
                this.ruleForm.subscribes1 = tagsList
            }
        },
        openSelectDialog(name,id){
            this.$refs.multipleSelePdialog.openCommonDialog(name,id)
        },
        successDing(formName){
            this.$refs[formName].validate((valid) => {                
            if (valid) {
                let param = {
                    subscribes0:this.ruleForm.subscribes0,
                    subscribes1:this.ruleForm.subscribes1,
                    origin:this.ruleForm.origin,
                }
                saveOriginSubscribe(param).then(res => {
                    if(res.code == 200){
                        this.closeCommonDialog()
                        this.$message({
                            showClose: true,
                            message:'操作成功！',
                            offset:220,
                            duration: 2000,
                            type: 'success'
                        })
                        this.$emit('mainListList')
                    }
            })
             } else {
                return false;
            }
        });
        },
        openCommonDialog(origin){
            let param = {
                origin
            }
            getOriginSubscribe(param).then(res => {
                if(res.data){
                    res.data.forEach(item => {
                        item.id = item.employeeId
                        item.name = item.employeeName
                    })
                    this.ruleForm = {
                        subscribes0:res.data.filter(item => {return item.type == 0}),
                        subscribes1:res.data.filter(item => {return item.type == 1}),
                        origin,
                    } 

                }else {
                    this.ruleForm = {
                        subscribes0:[],
                        subscribes1:[],
                        origin,
                    } 
                }
                
            })
            this.dialogVisible = true
        },
        closeCommonDialog(){
            this.$refs.formName.clearValidate()
            this.dialogVisible = false
        }
    }
}
</script>
<style scoped lang="scss">
::v-deep.dialog-main{
    .el-dialog__header{
        border-bottom: 1px solid #ccc;
        padding: 10px !important;
        .el-dialog__title{
            font-weight: bold;
        }
    }
    .el-dialog__body{
        padding: 10px 20px 10px !important;
        overflow-y: auto;
        .button-new-tag {
            padding: 4px 10px;
        }
    }
    
}
</style>